<template>
    <div>
        <van-nav-bar title="优惠券中心" left-text="返回" left-arrow @click-left="onClickLeft" />
    </div>
    <van-tabs v-model:active="active" @click-tab="makeGray">
        <van-tab title="可领取"></van-tab>
        <van-tab title="已过期" @click="makeGray()"></van-tab>
    </van-tabs>
    <div v-for="userCouponInfo in couponInfList" :key="userCouponInfo.id" v-show="couponDivShow">
        <van-cell-group style="margin-bottom: 8px;">
            <van-cell :title="userCouponInfo.name" :value="userCouponInfo.specialStr" :label="userCouponInfo.canGetStr"
                style="background-color: rgb(236, 51, 51)"  
                v-on:click="userGetCoupon(userCouponInfo.id)" />
        </van-cell-group>
    </div>
    <div v-for="userCouponInfo in couponInfList" :key="userCouponInfo.id" v-show="couponDivExShow">
        <van-cell-group style="margin-bottom: 8px;">
            <van-cell :title="userCouponInfo.name" :value="userCouponInfo.specialStr" :label="userCouponInfo.expireTypeStr"
                style="background-color: #D3D3D3" />
        </van-cell-group>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import { CouponList ,GetCoupon} from '@/api/market.js'
import { showToast } from 'vant';
var couponInfList = ref([])
var couponDivShow=ref(false)
var couponDivExShow=ref(false)
var active=ref(0)
var queryM = ref({
    pageNum: 1,
    pageSize: 20,
    expireType: 0,
    status: 1
})

var GetCouponData=ref({
    couponId:'0'
})

const onClickLeft = () => history.back();

function userGetCoupon(data) {
    GetCouponData.value.couponId=data;
    GetCoupon(GetCouponData.value)
        .then(res => {
            if (res.data.code == 200000) {
                getCouponInf();
                showToast('领取成功');
            } else {
                showToast(res.data.message);
            }
        })
}

getCouponInf();
function getCouponInf() {
    couponDivShow.value=true;
    couponDivExShow.value=false;
    couponInfList.value=[];
    queryM.value.expireType=0;
    CouponList(queryM.value)
        .then(res => {
            if (res.data.code == 200000) {
                couponInfList.value = res.data.data.data
            } else {
                //错误提示框
            }
        })
}

function getCouponInfExpired() {
    couponDivShow.value=false;
    couponDivExShow.value=true;
    couponInfList.value=[]
    queryM.value.expireType=1;
    queryM.value.status=2
    CouponList(queryM.value)
        .then(res => {
            if (res.data.code == 200000) {
                couponInfList.value = res.data.data.data
            } else {
                //错误提示框
            }
        })
}

//模仿--图片效果而已
//实际代码中，从后端接口返回图片地址展示
const isGray = ref(false);
function makeGray() {
    // todo 调用后端 重新渲染列表
    if (isGray.value == false) {
        isGray.value = true;
        getCouponInfExpired();
    } else {
        getCouponInf();
        isGray.value = false
    }
}
</script>
<style>
/* .is-gray {
  filter: grayscale(100%);
} */

.van-cell__title {
    font-size: 18px;
    color: aliceblue;
    
}
.van-cell-group__title{
    font-size: 20px;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bolder; 
    background-color: rgb(236, 51, 51)
}
.van-cell__label {
    font-size: 14px;
    color: black
}

.van-cell__value {
    font-size: 16px;
    font-weight: bolder; 
    color: #CFAE00
}
</style>